<template>
  <el-container class="home_container" >
    <el-header class="home_head">
      <div class="home_head_left">
        <img src="../../assets/logo.png" alt="" />
        <span>智慧众创孵化平台</span>
      </div>

      <div class="home_head_right">
        <span>{{ home_head.school }}</span>
        <a>
          <i class="el-icon-bell"> </i>
          <span class="sss" v-if="home_head.state"></span>
        </a>
        <el-dropdown @command="personal_drop_down" trigger="click">
          <span class="el-dropdown-link" style="color: #fff">
            <img :src="home_head.url" alt="" />{{ home_head.name
            }}<i class="el-icon-caret-bottom"></i
          ></span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">个人信息</el-dropdown-item>
            <!-- <el-dropdown-item command="1">修改密码</el-dropdown-item> -->
            <el-dropdown-item divided command="2">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <el-aside width="90px" class="sidebar">
        <!-- 一级菜单 -->
        <el-menu
          background-color="rgb(53,83,137)"
          text-color="#fff"
          active-text-color="rgb(33, 121, 255)"
          router
          :default-active="activePath"
        >
          <el-menu-item
            :index="item.index"
            v-for="item in menulist"
            :key="item.id"
            @click="saveNavState(item.index)"
          >
            <!-- <template slot="title"> -->

            <span :class="item.class">
              <span>{{ item.name }}</span>
            </span>
            <!-- </template> -->
          </el-menu-item>

          <el-dropdown
            id="switch_team"
            trigger="click"
            @command="handleCommand"
          >
            <img src="../../assets/icon/team.png" alt="" />
            <el-dropdown-menu slot="dropdown" class="team_dropdown">
              <div class="dropdown_head">
                <span>智慧众创孵化平台</span>
                <span>企微客服<i class="el-icon-arrow-right"></i></span>
              </div>

              <div class="dropdown_down">
                <el-divider direction="vertical"></el-divider>
                <span class="span_name" style="margin: 30px 0px">我创建的</span>
                <el-dropdown-item
                  v-show="item.own"
                  v-for="(item, index) in findTeamName"
                  :command="item"
                  :key="index"
                  :disabled="item.login"
                >
                  <el-avatar
                    class="Team_portrait"
                    fit="fill"
                    :size="20"
                    :src="item.avatarUrl"
                  ></el-avatar>
                  <span :class="{ team_name: item.login }"
                    >{{ item.teamName
                    }}<i
                      v-show="item.login"
                      class="el-icon-check"
                      style="margin-left: 20px; font-size: 19px"
                    ></i
                  ></span>
                </el-dropdown-item>

                <el-button
                  @click="to_Create_team"
                  type="primary"
                  plain
                  size="small"
                  style="width: 100%"
                  ><i class="el-icon-plus"></i>创建团队</el-button
                >
              </div>
              <div class="dropdown_down">
                <el-divider direction="vertical"></el-divider>
                <span class="span_name">我加入的</span>
                <el-dropdown-item
                  v-show="item.own == false"
                  v-for="(item, index) in findTeamName"
                  :command="item"
                  :key="index"
                  :disabled="item.login"
                >
                  <el-avatar
                    class="Team_portrait"
                    fit="fill"
                    :size="20"
                    :src="item.avatarUrl"
                  ></el-avatar>
                  <span :class="{ team_name: item.login }"
                    >{{ item.teamName
                    }}<i
                      v-show="item.login"
                      class="el-icon-check"
                      style="margin-left: 20px; font-size: 19px"
                    ></i></span
                ></el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu>
      </el-aside>
      <el-main class="home_main">
        <router-view @get_name_url="get_child" ></router-view>
      </el-main> </el-container
  ></el-container>
</template>

<script>
import Personal_Data from "./Personal_Data.vue";
export default {
  components: { Personal_Data },
  data() {
    return {
      findTeamName: [],
      TeamName: "",
      menulist: [
        {
          index: "/home/homepage",
          class: "el-icon-s-home",
          name: "首页",
        },
        {
          index: "/home/Incubation",
          class: "el-icon-document",
          name: "入孵",
        },
        {
          index: "/home/Daily",
          class: "el-icon-s-cooperation",
          name: "日常",
        },
        {
          index: "/home/Team",
          class: "el-icon-s-check",
          name: "团队",
        },

        {
          index: "/home/check",
          class: "el-icon-finished",
          name: "考核",
        },

        {
          index: "6",
          class: "el-icon-s-tools",
          name: "设置",
        },
      ],
      activePath: "/home/homepage",
      home_head: {
        school: "xxxx学院",
        state: true,
        url: "",
        name: "",
      },
    };
  },
  methods: {
    get_child(data) {   
      this.home_head.name = data.nickName;
      this.home_head.url = data.avatarUrl;
    },

    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    async handleCommand(command) {
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/team/setTeamId?team_id=" + command.id,
      });
      console.log(res);
      this.$message.success("切换成" + command.teamName + "团队");
      this.TeamName = command.teamName;
      window.sessionStorage.setItem("TeamName", this.TeamName);
      location.reload();
    },

    personal_drop_down(command) {
      if (command == 0) {
        this.$router.push("/home/Personal_Data");
        window.sessionStorage.setItem("activePath", "");
        this.activePath = "";
      }

      if (command == 2) {
        window.localStorage.clear();
        location.reload();
      }
    },
    to_Create_team() {
      this.$router.push("/home/Team/Team_Create_new_team");
      window.sessionStorage.setItem("activePath", "/home/Team");
      window.sessionStorage.setItem(
        "Team_name",
        "/home/Team/Team_Create_new_team"
      );
      this.activePath = window.sessionStorage.getItem("activePath");
    },
  },
  async created() {
    // console.log(window.localStorage.getItem("token"));
    //   this.$router.push("/login");
    if (window.sessionStorage.getItem("activePath") != undefined) {
      this.activePath = window.sessionStorage.getItem("activePath");
    }

    this.home_head.name = window.localStorage.getItem("name");
    this.home_head.url = window.localStorage.getItem("avatarUrl");
    const { data: res } = await this.$http({
      headers: { "Content-Type": "application/json;charset=UTF-8" },
      method: "get",
      url: "/api/team/findTeamName",
    });
    this.findTeamName = res.msg;
    if (window.sessionStorage.getItem("TeamName") == undefined) {
      this.TeamName = this.findTeamName[0].teamName;
      window.sessionStorage.setItem("TeamName", this.TeamName);
    }
  },
  mounted() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },
};
</script>

<style lang="less" >
.home_container {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.sidebar {
  height: 100%;
  // width: 100%;

  .el-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    width: 99%;
    padding: 0px;

    .el-menu-item {
      // margin: auto;

      margin-bottom: 20%;
      display: flex;
      flex-direction: column;
      height: 10%;
      // color: #fff;
      font-size: 15px;
      width: 100%;
      // width: ;

      span {
        margin: auto;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        font-size: 30px;
        span {
          //  width: 100%;
          font-size: 20px;
        }
      }
    }
    //移入移出的样式
    .el-menu-item:hover {
      background-color: rgb(2, 20, 44) !important;
    }
  }
}

.el-main {
  padding: 0px;
}

.home_head {
  display: flex;
  justify-content: space-between;
  height: 10%;
  padding: 10px;
  width: 100.6%;
  color: #fff;
  background-color: rgb(53, 83, 137);
}

.home_head_left {
  height: 100%;
  // width: 30%;
  display: flex;
  img {
    height: 40px;
    width: 40px;
  }

  span {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 25px;
    margin-left: 20px;
  }
}

.home_head_right {
  height: 50%;
  // width: 30%;
  display: flex;

  span {
    font-size: 20px;
    margin-right: 55px;
    //  margin: auto;
  }
  a {
    height: 35px;
    width: 35px;
    i {
      font-size: 30px;

      height: 35px;
      line-height: 35px;
    }
    i:hover {
      color: rgb(33, 121, 255);
    }
    .sss {
      width: 8px;
      height: 8px;
      color: #fff;
      float: right;
      margin-right: -3px;
      margin-top: -3px;
      background-color: #f00;
      border-radius: 50%;
      transform: translate(-100%, 10%);
    }
  }

  .el-dropdown {
    margin-left: 55px;
    margin-right: 20px;
    width: auto;
    display: flex;
    cursor: pointer;
    span {
      cursor: pointer;
      margin-left: 0px;
      margin-right: 6px;
      font-size: 23px;
      height: 35px;
      line-height: 35px;
      display: flex;
      i {
        height: 35px;
        line-height: 35px;
        font-size: 20px;
      }
      img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
}
#switch_team {
  // height: 60px;
  // width: 98px;
  background-color: rgb(53, 83, 137);
  border: none;
  cursor: pointer;
  margin-bottom: 1%;
  display: flex;
  position: absolute;
  bottom: 2%;
  left: 30%;
  img {
    height: 30px;
    width: 30px;
    margin: auto;
  }
}

.team_dropdown {
  // display: flex;
  padding-top: 0px;
  border: none;
  border-radius: 10px;
  // width: 200px;

  .dropdown_head {
    // padding: 0px 30px;

    background-color: rgb(82, 146, 192);
    color: #fff;
    text-align: center;
    height: 50px;
    display: flex;
    margin: 0px;
    border-radius: 10px 10px 0px 0px;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
  }
  .dropdown_down {
    // padding:10px 10px;
    .el-dropdown-item {
      padding: 10px 0px;
    }
    .el-avatar {
      // display: ;
      // margin-top: 25px;
      line-height: 40px;

      margin-right: 10px;
    }
  }
}
.span_name {
  height: 40px;
  margin: 30px 0px;
  // margin-top: 100px !important;
}
.home_main {
  position: absolute;
  left: 90px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: auto;
}
.Team_portrait {
  text-align: center;
  transform: translateY(20%);
}
.team_name {
  color: rgb(33, 121, 255);
}
</style>